<template>
  <el-form :model="form" ref="regUserform" :rules="loginRules">
    <div class="avatar-box">
      <img src="/logo.JPG" alt="" />
    </div>
    <div class="title-container">
      <h1 class="title">SIK 博客</h1>
    </div>
    <el-form-item prop="nickname">
      <el-input
        placeholder="Nickname"
        v-model.trim="form.nickname"
        clearable
        prefix-icon="el-icon-edit"
      ></el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input
        placeholder="Username"
        v-model.trim="form.username"
        clearable
        prefix-icon="el-icon-user-solid"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        placeholder="Password"
        v-model="form.password"
        show-password
        :prefix-icon="this.toggleIcon ? 'el-icon-lock' : 'el-icon-unlock'"
        @blur="handleBlur"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="form-btn" type="primary" @click="submit"
        >注 册</el-button
      >
      <div class="footer">
        <router-link to="/user/login">已有账号,请登录</router-link>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  regUsername,
  regPassword,
  username,
  password,
  nickname,
} from "@/utils/validata";
export default {
  name: "RegUser",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!regUsername(value)) {
        callback(new Error("用户名只能由字母或数字或下划线组成"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!regPassword(value)) {
        callback(new Error("密码必须由6到11位大小写字母和数字组成"));
      } else {
        callback();
      }
    };
    return {
      toggleIcon: false,
      form: {
        username: "",
        password: "",
        nickname: "",
      },
      loginRules: {
        username: [
          ...username,
          { validator: validateUsername, trigger: "blur" },
        ],
        password: [
          ...password,
          { validator: validatePassword, trigger: "blur" },
        ],
        nickname: [...nickname],
      },
    };
  },

  methods: {
    handleBlur() {
      if (this.form.password != "") {
        this.toggleIcon = true;
      } else {
        this.toggleIcon = false;
      }
    },
    submit() {
      this.$refs.regUserform.validate((valid) => {
        if (valid) {
          // 校验成功
          this.$http
            .post("/users/regUser", {
              ...this.form,
            })
            .then((res) => {
              if (res.code == 0) {
                // 2.提示消息
                this.$message({
                  type: "success",
                  message: "注册成功,请登录",
                  duration: 1000,
                });
                // 3.跳转页面
                this.$router.push("/user/login");
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                  duration: 1000,
                });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码不合法,请重新输入!",
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-form {
  height: 400px;
}
.avatar-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -45px;
  margin-left: -40px;
}
.avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.title-container .title {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin: 22px auto;
  padding-top: 10px;
}
.login-container .form-btn {
  width: 270px;
  /* height: 30px; */
  color: #fff;
  padding: 8px 20px;
  margin-top: 10px;
  font-size: 22px;
  border-radius: 21px;
  background-image: linear-gradient(
    to right,
    #e4afcb 0%,
    #b8cbb8 20%,
    #b8cbb8 40%,
    #e2c58b 60%,
    #c2ce9c 80%,
    #7edbdc 100%
  );
}
.login-container .footer a {
  color: #fff;
  font-size: 12px;
  transition: all 0.5s;
  text-decoration: none;
}
.footer:hover a {
  color: #7edbdc;
}
</style>
